<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件匹配</title>
</head>
<body>

    <div class="text">
        你好我们的朋友你好都是好
    </div>

    <script>
        let dymic_text = prompt("请输入要匹配的字符串：");

        let text = document.querySelector(".text").innerText;
        let reg = new RegExp(dymic_text,'g');
        let colors = ['#ff9632','#ffff00']
        let count  = 0
        let selectIndex = 0
        let mytext = text.replace(reg, function(match,index){
               let color = ''
               if(count<1)  color = colors[0]
               else  color = colors[1]
               count++ 
               console.log(color,'color')

               return `<span style='color:red;background:${color};'>${match}</span>`;
        })
        document.querySelector(".text").innerHTML = mytext

    </script>
    
</body>
</html>